<template>
  <div class="pages transactionSee">
    <div class="pageLevel">
      <!-- 头部 -->
      <el-button style="margin:10px 0 10px 30px;" type="primary" @click="goBack()"> 返回</el-button>
      <div class="content">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label="服务商名称：">
                <span>{{tableData.providerName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="服务商类型：">
                <span>{{tableData.providerType}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="130px" label="服务商等级：">
                <span>{{tableData.providerGrade}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label-width="115px" label="招商门店数量：" v-if="Type=='T01'">
                <span>{{tableData.storeNum}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商数量：" v-if="Type=='T02'">
                <span>{{tableData.storeNum}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="医生数量：" v-if="Type=='T03'">
                <span>{{tableData.storeNum}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="from_main infon">
            <div class="infon_text">
              <span class="infon_shu"></span>
              <span v-if="Type=='T01'" class="infon_text_t">门店明细</span>
              <span v-if="Type=='T02'" class="infon_text_t">供应商明细</span>
              <span v-if="Type=='T03'" class="infon_text_t">医生明细</span>
            </div>
          </div>
          <el-table :data="tableData.storeList" border style="width: 100%" v-if="Type=='T01'">
            <el-table-column prop="storeName" label="门店名称" align="center">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" :formatter="trunTime" align="center">
            </el-table-column>
            <el-table-column prop="totalOrderGoodsAmount" label="累计订货金额" align="center">
            </el-table-column>
            <el-table-column prop="totalBenefitAmount" label="累计分润金额" align="center">
            </el-table-column>
          </el-table>
          <el-table :data="tableData.storeList" border style="width: 100%" v-if="Type=='T02'">
            <el-table-column prop="storeName" label="供应商名称" align="center">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" :formatter="trunTime" align="center">
            </el-table-column>
            <el-table-column prop="totalOrderGoodsAmount" label="累计订货金额" align="center">
            </el-table-column>
            <el-table-column prop="totalBenefitAmount" label="累计分润金额" align="center">
            </el-table-column>
          </el-table>
          <el-table :data="tableData.storeList" border style="width: 100%" v-if="Type=='T03'">
            <el-table-column prop="storeName" label="医生姓名" align="center">
            </el-table-column>
            <el-table-column prop="goodsName" label="所属机构" align="center">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" :formatter="trunTime" align="center">
            </el-table-column>
            <el-table-column prop="totalOrderGoodsAmount" label="累计订货金额" align="center">
            </el-table-column>
            <el-table-column prop="totalBenefitAmount" label="累计分润金额" align="center">
            </el-table-column>
          </el-table>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { findProviderBillInfo } from "@/api";
import util from "@/util";
export default {
  computed: mapState(["merchantId", "path"]),
  data() {
    return {
      id: "",
      Type: "",
      Grade: "",
      showTabtype: "",
      tableData: {},
      ruleForm: {
        name: "111"
      },
      rules: {
        name: [{ required: true, message: "请输入打款金额", trigger: "blur" }]
      }
    };
  },
  created() {
    this.Type = util.getQuery().Type;
    this.Grade = util.getQuery().Grade;
    this.id = util.getQuery().id;
    let arr = this.path;
    arr.pop();
  },
  mounted() {
    this.getdata();
  },
  methods: {
    trunTime(row, column, cellValue) {
      return util.foryear(cellValue) + " " + util.fortime(cellValue);
    },
    getdata() {
      let postdata = {
        shopId: this.merchantId,
        providerId: this.id,
        providerType: this.Type,
        providerGrade: this.Grade
      };
      findProviderBillInfo(postdata).then(res => {
        this.tableData = res.data;
      });
    },
    goBack() {
      history.back();
    }
  }
};
</script>
<style scoped>
.content {
  width: 845px;
  margin: 20px 0 0 30px;
}
.transactionSee span {
  color: #606266;
}
.infon_text-ul {
  margin-left: 85px;
  width: 750px;
  height: 200px;
}
.infon_text-ul li {
  width: 100%;
  line-height: 44px;
  font-size: 16px;
  color: #6b6b6b;
  text-indent: 20px;
  position: relative;
  font-weight: bolder;
}
.infon_text-ul .lines {
  border-bottom: 1px dashed #ccc;
}
.infon_text-ul li .span1 {
  position: absolute;
  right: 350px;
}
.infon_text-ul li span {
  position: absolute;
  right: 25px;
}
.infon_text-ul .li-font {
  font-weight: normal;
}

.infon_text-ul .li-height {
  height: 50px;
  line-height: 50px;
}
.infon_text-ul .li-red span {
  color: red;
}
</style>

